// components/test1/test1.js
Component({
  // 推荐用法
  lifetimes: {
    // 组件实例刚被创建好的时候 
    // (1)此时调用 setData 不会有效果
    // (2)通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
    created() {
      console.log('created');
      // this.setData({
      //   count: 11
      // })
    },
    // 在组件实例进入页面节点树时执行
    // (1)此时， this.data 已被初始化完毕
    // (2)这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
    attached() {
      console.log('attached');
      this.setData({
        count: 11
      })
    },
    // 组件渲染完成
    ready() {
      console.log('ready');
    },
    // 在组建实例被从页面节点树移除时执行
    // (1)退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
    // (2)此时适合做一些清理性质的工作,例如,清除定时器
    detached() {
      console.log('detached');
    },
  },
  options: {
    // styleIsolation: "isolated"
    // styleIsolation: "apply-shared"
    // styleIsolation: "shared"
    // 指定所有_开头的数据字段为 纯数据字段
    pureDataPattern: /^_/
  },
  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: Number,
      value: 10
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    count: 0,
    _rgb: {
      r: 20,
      g: 0,
      b: 0
    },
    n1: 0,
    n2: 0,
    sum: 0,
    fullColor: '20,34,54'
  },

  observers: {
    // 分开写
    // n1(newN1) {
    //   this.setData({
    //     sum: newN1 + this.data.n2
    //   })
    // },
    // n2(newN2) {
    //   this.setData({
    //     sum: newN2 + this.data.n1
    //   })
    // },
    // 一起监听
    'n1, n2'(newN1, newN2) {
      this.setData({
        sum: newN1 + newN2
      })
    },
    // 'rgb.r,rgb.g,rgb.b': function (newR, newG, newB) {
    //   this.setData({
    //     fullColor: `${newR},${newG},${newB}`
    //   })
    // },
    '_rgb.**': function (obj) {
      this.setData({
        fullColor: `${obj.r},${obj.g},${obj.b}`
      })
    }
  },
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      })
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    },
    lookdifference() {
      console.log(this.data);
      console.log(this.properties);
      console.log(this.data === this.properties);
    },
    // 点击事件
    addCount() {
      this.setData({
        // count: this.data.count + 1
        count: this.properties.count + 1
      })
      // 可以改，但不建议改
      // this.setData({
      //   max: 50
      // })
      this._showCount()
    },
    _showCount() {
      wx.showToast({
        title: this.data.count + '',
      })
    },
    changeR() {
      this.setData({
        // 错误示范
        // rgb: { r: 50 }
        // 可以
        // rgb: { ...this.data.rgb, r: 100 }
        // 可以（推荐）
        '_rgb.r': this.data._rgb.r + 10
      })
    }
  }
})
